<template>
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>汽车品牌列表 </h5>
                        <!--
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="table_data_tables.html#">选项1</a>
                                </li>
                                <li><a href="table_data_tables.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                        -->
                        <div style="float:right"><a href="/#/brand/0/edit">
                            添加
                        </a></div>
                    </div>
                    <div class="ibox-content">

                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>拼音前缀</th>
                                <th>操作</th>
                            </tr>
                            <tr>
                                <th></th>
                                <th><input style="width:160px;max-width:96%" type="text" v-model="search.name" /></th>
                                <th><input style="width:160px;max-width:96%" type="text" v-model="search.letter_pre" /></th>
                                <th><a v-on:click='getList()' class="button">
                                    搜索
                                </a></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeA" v-for="item in list">
                                <td>{{item.id}}</td>
                                <td>{{item.name}}</td>
                                <td>{{item.letter_pre}}</td>
                                <td class="center"><a v-bind:href="item.url" class="button">编辑</a></td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>拼音前缀</th>
                                <th>操作</th>
                            </tr>
                            </tfoot>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import config from '../config'
    export default{
        name : 'brand',
        data () {
            return {
                msg: 'Welcome to brand vue',
                list:[],
                search:{
                    'page': 1,
                    'letter_pre':'',
                    'name':''
                },
                getList : function(){
                    var api_token = localStorage.getItem('api_token');
                    var brandUrl = config.api_url + '/backend/brands' + '?api_token=' + api_token;
                    var t = this;
                    $.ajax({
                        type: "get",
                        url: brandUrl,
                        dataType: 'json',
                        data: t.search,
                        xhrFields:true,
//                        xhrFields:"'Access-Control-Allow-Origin': '*'",
                        success:function( json ){
                            t.list = [];
                            if( json.status == undefined || json.status == 0 ){
                                for(var i =0;i < json.length; i ++){
                                    json[i].url = '#/brand/'+json[i].id + '/edit';
                                    t.list.push( json[i]);
                                }
                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }

                        }
                    });
                }
            }
        }
        ,created: function(){

            this.getList();
        }

    }
</script>

